<template>
  <div class="kind">
    <!-- 分类布局页面开始 -->
    <div class="kind_head">
      <input type="text" placeholder="输入类别、课程、老师查找">
    </div>
    <div class="kind_list" :style="{height:(curHeight)}">
        <div class="kind_left" :style="{height:curHeight}">
          <ul>
            <li  v-for="(item,index) in arr" :key="index"
            :class="num==index?'active':''" @click="left(index)">
              {{item.name}}
            </li>
          </ul>
        </div>
         <div class="kind_right" :style="{height:curHeight}">
          <ul>
            <li  v-for="(item,index) in list" :key="index">
              <img :src="item.picUrl"/>
              <div class="right_list">
                <p>{{item.title}}</p>
                <p>播放量:{{item.viewcount>10000? item.viewcount/10000+'万':item.viewcount}}</p>
              </div>
            </li>
          </ul>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "kind",
  data(){
    return{
      height:100+'rem',
      num:0,
      arr:[
        {name:'数学',id:26,type:5},
        {name:'哲学',id:17,type:5},
        {name:'社会',id:7,type:5},
        {name:'历史',id:18,type:5},
        {name:'经济',id:19,type:5},
        {name:'心理',id:23,type:5},
        {name:'媒体',id:21,type:5},
        {name:'环境',id:31,type:5},
        {name:'医学',id:30,type:5},
        {name:'物理',id:27,type:5},
        {name:'法律',id:20,type:5},
        {name:'计算机',id:32,type:5},
        {name:'技能',id:25,type:5},
        {name:'伦理',id:22,type:5},
        {name:'艺术',id:16,type:5},
        {name:'文学',id:15,type:5},
        {name:'管理',id:24,type:5},
        {name:'趣味课堂',id:6,type:5},
        {name:'直播回顾',id:40,type:5},
        {name:'可汗学院',id:13,type:5},
        {name:'演讲',id:5,type:5},
        {name:'听世界',id:69,type:5},
        {name:'云课堂',id:36,type:5},
      ],
      id:'',
      list:[],
     curHeight:''
    }
  },
  mounted() {
 
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight =h-126+'px'; //减去页面上固定高度height
        console.log(h);
        console.log(this.curHeight)
    },
  created(){
     this.jie(this.arr[0].id);
  },
  methods:{
    left(k){
      this.num=k;
      this.id=this.arr[k].id;
      // this.type=this.arr[k].type;
     this.jie(this.id);
    },
    jie(val){
       this.$http.get(`https://c.open.163.com/open/mob/movie/classify/playlist.do?id=${val}&type=5&cursor=0&pagesize=10`)
      .then(res=>{
        console.log(res);
        this.list=res;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
img,p,div,ul,li{
  margin: 0;
  padding: 0;
}
.kind{
  height: 100%;
}
.active{
  background: orange;
  color: white;
  font-weight: 700;
}
.kind_list{
  background: #ffffff;
  display: flex;
  // margin-top: 1rem;
  flex: 1;
  .kind_left{
    flex: .3;
    // height: 11.4rem;
    // border: 1px solid #000;
    overflow:auto;
    border-right: 1px solid #cccccc;
    ul{
      li{
        width: 100%;
        height: .8rem;
        border-bottom:1px solid #cccccc;
        font-size: .3rem;
        text-align: center;
        line-height: .8rem;
      }
    }
  }
  .kind_right{
    flex: .7;
    // height: 11.4rem;
    // border: 1px solid red;
    overflow: auto;
    background: #ffffff;
    // padding:.2rem;
    ul{
      li{
        padding:.2rem;
        &>img{
           width: 100%;
           height: 2rem;
           border-radius: .1rem;
        }
        .right_list{
          font-size: .3rem;
          color: #cccccc;
          &>p:nth-child(1){
            color: #000;
            font-weight: bold;
            margin-bottom: .1rem;
          }
        }
      }
    }
  }
}
  .kind_head{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #cccc;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    // position: fixed;
    // z-index: 9999;
    // top: 0;
    input{
      width: 60%;
      height: .6rem;
      padding-left: 1rem;
      background: url('../../assets/suosou.svg') no-repeat .2rem;
      background-size: .4rem .4rem;
      border: 1px solid #cccccc;
      border-radius: .6rem;
      outline-style: none;
    }
     ::-webkit-input-placeholder{
        font-size: .3rem;
        color: #cccccc;
        line-height: .6rem;
      }
  }

</style>
